import React, {Component} from 'react'
import {FormGroupLabel} from '../FormGroupLabel'

interface Props {
  type?: 'checkbox' | 'radio'
  name: string
  label?: any
  helpText?: React.ReactNode
  checked: boolean
  onChange: (checked: boolean) => void
  className?: string
  id: string
  disabled?: boolean
}

class CheckboxVertical extends Component<Props> {
  render() {
    let {type, name, label, checked, helpText, onChange, className, disabled, id} = this.props
    return (
      <FormGroupLabel
        helpText={helpText}
        className={'flex-row align-items-center ' + (className ? className : '')}>
        <input
          id={id}
          type={type || 'checkbox'}
          name={name}
          checked={checked}
          disabled={disabled}
          onChange={(evt: any) => {
            onChange(evt.target.checked)
          }}
        />

        {label && (
          <label
            htmlFor={id}
            className={'custom-control-label mb-0 ml-x2 ' + (disabled ? 'label-disabled ' : '')}>
            {label}
          </label>
        )}
      </FormGroupLabel>
    )
  }
}

export default CheckboxVertical
